<template>
  <div class="ep-widget-form-item-container">
    <div
      v-if="item.type === 'card'"
      :class="[{ selected: designerSelected, card: designer }, 'form-item']"
      @click="designer && setSelected && setSelected(item)"
    >
      <slot />
    </div>
    <div
      v-else-if="item.type === 'divider'"
      :class="[{ selected: designerSelected }, 'form-divider']"
      @click="designer && setSelected && setSelected(item)"
    >
      <slot />
    </div>
    <div v-else @click.stop="designer && setSelected && setSelected(item)">
      <el-form-item
        :label="item.options.label"
        :rules="rules"
        :prop="item.options.name"
        :label-position="(item.options && item.options.labelPosition) || undefined"
        :show-message="showMessage"
        :class="{ selected: designerSelected, 'deep-select': designer && item.type !== 'subform' }"
      >
        <slot />
      </el-form-item>
    </div>

    <div v-if="designerSelected && !removeDisabled" class="drag-handler">
      <el-icon><Rank /></el-icon>
    </div>
    <div v-if="designerSelected" class="drag-action">
      <el-button-group>
        <el-button :disabled="index == 0" type="primary" icon="Top" size="small" @click.stop="moveup" />
        <el-button
          :disabled="index == widgetList.length - 1"
          type="primary"
          icon="Bottom"
          size="small"
          @click.stop="movedown"
        />
        <el-button :disabled="removeDisabled" type="primary" icon="Delete" size="small" @click.stop="remove" />
      </el-button-group>
    </div>
  </div>
</template>

<script>
import { computed, inject, getCurrentInstance } from 'vue'
export default {
  props: {
    /** 设计器中展示 */
    designer: {
      type: Boolean,
      default: false
    },
    /** 组件列表 */
    widgetList: {
      type: Array,
      default: () => []
    },
    /** 组件配置项 */
    item: {
      type: Object,
      default: () => {}
    },
    /** 表单验证规则 */
    rules: {
      type: Array,
      default: null
    },
    /** 组件索引 */
    index: {
      type: Number,
      default: 0
    },
    /** 是否显示校验错误信息 */
    showMessage: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    const { proxy } = getCurrentInstance()
    const selected = inject('selected', null)
    const designerSelected = computed(() => {
      if (props.designer && selected.value.id === props.item.id) {
        return true
      }
      return false
    })
    const setSelected = inject('setSelected', null)
    const usedConditionIds = inject('usedConditionIds', null)
    const usedConditionIdsList = computed(() => {
      return usedConditionIds.value || []
    })

    /** 自定义组件禁止删除的字段 */
    const cardNotRemoveItems = ['Type', 'BTime', 'ETime', 'leaveDays', 'remark']

    const removeDisabled = computed(() => {
      if (cardNotRemoveItems.includes(props.item.options.name)) {
        return true
      }
      return false
    })

    const list = computed(() => props.widgetList)

    const moveup = () => {
      if (Array.isArray(list.value)) {
        if (props.index === 0) {
          proxy.$message.warning('已经移动到最上面.')
          return false
        }
        list.value.splice(props.index, 1, ...list.value.splice(props.index - 1, 1, list.value[props.index]))
      }
    }

    const movedown = () => {
      if (Array.isArray(list.value)) {
        if (props.index === list.value.length - 1) {
          proxy.$message.warning('已经移动到最下面.')
          return false
        }
        list.value.splice(props.index, 1, ...list.value.splice(props.index + 1, 1, list.value[props.index]))
      }
    }

    const remove = () => {
      if (usedConditionIdsList.value.includes(props.item.id)) {
        proxy.$message.error('该组件已作为流程判断条件，无法删除.')
        return false
      }
      if (props.item.type === 'card') {
        if (props.item.components.some((m) => usedConditionIdsList.value.includes(m.id))) {
          proxy.$message.error('该组件已作为流程判断条件，无法删除.')
          return false
        }
      }
      list.value.splice(props.index, 1)
      setSelected(list.value[list.value.length - 1] || {})
    }

    return {
      designerSelected,
      setSelected,
      remove,
      moveup,
      movedown,
      removeDisabled
    }
  }
}
</script>

<style lang="scss">
.ep-widget-form-item-container {
  position: relative;

  .deep-select {
    pointer-events: none;
  }

  .drag-handler {
    position: absolute;
    top: -2px;
    left: -2px;
    background: #409eff;
    color: white;
    height: 22px;
    line-height: 22px;
    z-index: 9;
    cursor: move;
  }

  .drag-action {
    position: absolute;
    right: 0;
    bottom: 0;
    background: #409eff;
    color: white;
    z-index: 9;
    cursor: pointer;

    i {
      font-size: 14px;
      color: #fff;
      margin: 0 3px;
      cursor: pointer;
    }
  }

  .selected {
    outline: 2px solid #409eff;
  }
  .form-item {
    min-height: 32px;
    margin-bottom: 18px;
  }
  .form-divider {
    min-height: 32px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .card {
    outline: 1px dashed #999;
    padding: 10px 0;

    .form-widget-list {
      min-height: 100px;
    }

    &.selected {
      outline: 2px solid #409eff;
    }
  }
}
</style>
